﻿import React from 'react';
import ReactDOM from 'react-dom';
import mirror, {actions, connect,Link} from 'mirrorx';

import { List, InputItem, WhiteSpace, WingBlank, Button,Flex } from 'antd-mobile';
import { createForm } from 'rc-form';

import { FormattedMessage} from 'react-intl';

class App extends React.Component { 
	constructor(props) {
		super(props);
		this.state={
			errorMap:{}
		}
		this.id = T.urlQuery("id");//id==1表示登录密码，id==2表示交易密码

		const Lang = window.LangMessage ||{};

		this.keyCodes = [{
			name:"oldPwd",
			keycode:"oldPwd",
			text:this.id == 1 ? Lang.log_pwd || "登录密码" : Lang.transac_pwd ||"交易密码",
			type:"password",
			required:true,
			tip:this.id == 1 ? Lang.input_log_pwd ||"请输入登录密码" :Lang.input_transac_pwd || "请输入交易密码",
			message:Lang.pwd_tip_general ||"请输入正确的密码",
			maxLength:this.id == 1 ? 20 : 6
		},{
			name:"newPwd",
			keycode:"newPwd",
			text:Lang.new_password || "新密码",
			type:"password",
			required:true,
			tip:this.id == 1 ?  Lang.log_pwd_rule ||"6-20位数字+字母组合" : Lang.transac_pwd_rule ||"6位数字密码",
			message:Lang.pwd_tip_general ||"请输入正确的密码",
			pattern:this.id == 1 ? /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/ :  /^\d{6}$/,
			maxLength:this.id == 1 ? 20 : 6
		},{
			name:"rePassword",
			keycode:"rePassword",
			text:Lang.re_input ||"再次输入",
			type:"password",
			required:true,
			tip:Lang.re_input_new_pwd ||"再次输入新密码",
			message:Lang.re_input_pwd ||"请再次输入密码",
			pattern:this.id == 1 ? /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/ :  /^\d{6}$/,
			maxLength:this.id == 1 ? 20 : 6
		}];
	  }

	componentDidMount(){
		
	}	

	onErrorClick=(keyCode)=>{	//点击报错icon出现的提示	
		const {getFieldError } = this.props.form;
		let msg = getFieldError(keyCode);
		if(msg){			
			T.showError(msg.join(","));
		}	
	}
	
	submit=()=>{
		const Lang = window.LangMessage ||{};
		this.props.form.validateFields((error, values) => {
			var errorMap ={}
			if(error){
				for(var key in error){
					errorMap[key] = 1;
				}
			}else{
				if(values.newPwd !==values.rePassword){
					T.showError(Lang.two_pwd_not_same || "两次密码输入不一致")
					
				}else{
					if(this.id=="1"){
						values.pwdType = "LOGIN_PWD"
					}else if(this.id=="2"){
						values.pwdType = "TRANSACTION_PWD";
					}
	
					delete values.rePassword;
					
					T.fetch({				
						url:"/customer/password/modify.json",
						data:values,
					}).then((res)=>{
						 if(res.success){
							T.showSuccess(Lnag.pwd_resdt_success || "密码重置成功")
						}
					});	
				}		
			}

			this.setState({
				errorMap
			});
			console.log(error, values);
		});
	}

	passWordForget = () =>{
		actions.routing.push({
			pathname: 'password-forget',
            search: '?id='+ this.id
		})
	}
	
	render() {
		const { getFieldProps } = this.props.form;
		return (<div className="">
			<WhiteSpace/>
			<List>
			{this.keyCodes.map((item,index)=>
				<InputItem  key={index}
				{...getFieldProps(item.keycode,{
					rules: [{
						required: item.required === undefined ? true:item.required,
						message:item.message || (item.tip),
						pattern:item.pattern,
						name:item.name
					}]
				})}
				type={item.type}
				name={item.name}
				error ={this.state.errorMap[item.keycode]}
				onErrorClick={this.onErrorClick.bind(this,item.keycode)}
				clear				
				maxLength={item.maxLength}
				placeholder='Please input'
				labelNumber={10}	
				>{item.text}</InputItem>
			
			)}
			
		</List>
			<WhiteSpace/>
			<WhiteSpace/>
			<WingBlank>	
			<Flex>					
				<Flex.Item>
					<Button type="primary" inline onClick={this.passWordForget} className="diy_background diy_border" style={{width:'100%'}}>
						<FormattedMessage id='forget_pwd' defaultMessage='忘记密码'/>
					</Button>
				</Flex.Item>
				<Flex.Item>
					<Button type="primary" inline  onClick={this.submit} className="diy_background diy_border" style={{width:'100%'}}>
				        <FormattedMessage id='sure' defaultMessage='确定'/>
					</Button>
				</Flex.Item>
			</Flex>			
			</WingBlank>
	  	</div>)
	}
}

const AppForm = createForm()(App);

export default AppForm;